<template>
  <div id="login-modal" class="modal-overlay" :class="{ hidden: !showState }" @click.self="handleClose">
    <div class="modal-content">
      <div class="modal-header">
        <h3>请先登录</h3>
        <button class="close-button" @click="handleClose">×</button>
      </div>
      
      <div class="modal-body">
        <p>{{ message || '该操作需要登录后才能使用' }}</p>
      </div>
      
      <div class="modal-footer">
        <button class="cancel-button" @click="handleClose">取消</button>
        <router-link to="/login" class="login-button" @click="handleLogin">登录</router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, defineProps, defineEmits } from 'vue'

// 扩展Window接口，声明全局函数
declare global {
  interface Window {
    showLoginModal: (message?: string) => void
    showLoginPrompt: (message?: string) => void
  }
}

// 定义props
const props = defineProps<{
  show?: boolean
  message?: string
}>()

// 定义emits
const emit = defineEmits<{
  close: []
  login: []
}>()

// 响应式显示状态，用于外部控制和全局调用
const showState = ref(props.show || false)

// 监听props变化，确保响应式更新
watch(() => props.show, (newShow) => {
  showState.value = newShow || false
})

// 处理关闭
const handleClose = () => {
  showState.value = false
  emit('close')
}

// 处理登录按钮点击
const handleLogin = () => {
  showState.value = false
  emit('login')
}

// 全局显示登录弹窗的函数
const showLoginModal = (message?: string) => {
  showState.value = true
  if (message) {
    // 如果需要，可以添加message的响应式处理
  }
}

// 将函数挂载到window对象上，方便全局调用
onMounted(() => {
  // 使用更简单的方式避免类型错误
  Object.assign(window, {
    showLoginModal,
    showLoginPrompt: showLoginModal
  })
})

// 监听props变化
if (import.meta.hot) {
  import.meta.hot.on('propsChanged', (newProps: any) => {
    showState.value = newProps.show || false
  })
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 400px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E5EA;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1C1C1E;
}

.close-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F2F2F7;
  color: #8E8E93;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: #E5E5EA;
  color: #1C1C1E;
}

.modal-body {
  padding: 24px;
  text-align: center;
}

.modal-body p {
  margin: 0;
  color: #6C6C70;
  font-size: 1rem;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px;
}

.cancel-button, .login-button {
  flex: 1;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cancel-button {
  background-color: #F2F2F7;
  color: #1C1C1E;
  border: none;
}

.cancel-button:hover {
  background-color: #E5E5EA;
}

.login-button {
  background-color: #FF69B4;
  color: white;
  border: none;
}

.login-button:hover {
  background-color: #FF1493;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.25);
  color: white;
}

.hidden {
  display: none;
}
</style>